<template>
  <div class="versionView-container">
    <div class="header">
      {{ sceneNodeName }}
    </div>
    <div class="BlackHole-container">
      <div class="spin-warp" v-if="status != 10 || loading">
        <a-spin size="large" />
        <div class="tip">模型正在转换中，请稍后重试......</div>
      </div>
      <div class="bim-container" ref="blackHoleContainer"></div>
    </div>
  </div>
</template>

<script>
//变更日志-预览模型
import { axios } from "@/utils/request";
import { canvasHolder } from "@/blackHoleTools/CanvasHolder";
export default {
  data() {
    return {
      viewData: {},
      sceneNodeName: "",
      loading: false,
      status: 0,
    };
  },
  mounted() {
    this.$nextTick((_) => {
      let { name, dataSetId } = this.$route.query;
      this.sceneNodeName = name || "3D模型";
      document.title = name;
      this.getSetModelData(dataSetId);
    });
  },
  methods: {
    //初始化引擎引擎系统
    initEngine() {
      let canvasDom = canvasHolder.get();
      if (!canvasDom) {
        canvasDom = canvasHolder.create();
        document.body.appendChild(canvasDom);
      }
      window.BlackHole3D = window.BlackHole3D ? window.BlackHole3D : {};
      window.BlackHole3D["canvas"] = canvasDom;
      if (typeof window.BlackHole3D.RealBIMWeb === "undefined") {
        window.BlackHole3D = window.CreateBlackHoleWebSDK(window.BlackHole3D);
      }
    },

    //引擎系统初始化完成回调
    onSystemReady() {
      let containerBox = this.$refs["blackHoleContainer"];
      var sysInfo = new BlackHole3D.RESysInfo();
      //相对于html页面的RealBIMWeb_Worker.js的路径
      sysInfo.workerjsPath = "./blackhole/RealBIMWeb_Worker.js";
      //初始化图形窗口的宽度
      sysInfo.renderWidth = containerBox?.clientWidth;
      //初始化图形窗口的高度
      sysInfo.renderHieght = containerBox?.clientHeight;
      //引擎调用的公共资源的路径
      sysInfo.commonUrl =
        "http://203.156.230.22:9012/default.aspx?dir=url_res03&path=res_gol001";
      //引擎资 源发布服务配套的用户名、密码
      sysInfo.userName = "bjadmin";
      sysInfo.passWord = "Bj@123456.";
      //表示主窗口的名称,对应document.title，默认值 "BlackHole"
      sysInfo.mainWndName = document.title;
      //开始执行场景初始化，加载公共资源
      BlackHole3D.initEngineSys(sysInfo);
      console.log("引擎系统初始化完成", sysInfo, BlackHole3D);
    },

    //查询BIM地址
    getSetModelData(dataSetId = "") {
      this.loading = true;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/blackHole3D/project/dataSet/viewDataSetModel`,
            {
              dataSetIds: [dataSetId],
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.viewData = res?.data?.modelData ?? [];
            this.status = this.viewData?.[0]?.status ?? 0;
            this.addEventListener();
            this.initEngine();
            resolve();
          })
          .catch((_) => {
            this.viewData = [];
            reject();
          });
      });
    },

    //系统引擎创建完成回调【加载模型资源】
    onEngineCreated() {
      let { viewData } = this;
      let dom = this.$refs.blackHoleContainer;
      let BlackHole3D = window.BlackHole3D;
      canvasHolder.moveCanvasToTarget(this.$refs.blackHoleContainer);
      BlackHole3D.m_re_em_window_width = dom.clientWidth;
      BlackHole3D.m_re_em_window_height = dom.clientHeight;
      BlackHole3D.Coordinate.setEngineWorldCRS("EPSG:3857");
      let dataSetSources = [];
      viewData.forEach((item) => {
        let { dataSetId, resourcesAddress } = item;
        dataSetSources.push({
          dataSetId,
          resourcesAddress,
          useTransInfo: true,
          transInfo: [
            [1, 1, 1],
            [0, 0, 0, 1],
            [0, 0, 0],
          ],
        });
      });
      //开始加载一个或多个模型资源
      BlackHole3D.Model.loadDataSet(dataSetSources);
    },

    //bim事件监听
    addEventListener() {
      document.addEventListener("RESystemReady", this.onSystemReady);
      document.addEventListener("RESystemEngineCreated", this.onEngineCreated);
      //场景模型加载完成回调
      document.addEventListener("REDataSetLoadFinish", (_) => {
        //设置系统UI
        this.setSystemUI();
        this.loading = false;
        let { dataSetId } = this.$route.query;
        BlackHole3D.Camera.setCamLocateToDataSet(
          dataSetId,
          2.0,
          BlackHole3D.RECamDirEm.CAM_DIR_DEFAULT
        );
      });
      window.addEventListener("resize", this.onResize);
    },

    //设置系统UI
    setSystemUI() {
      try {
        BlackHole3D.Graphics.setGeoCoordVisible(true);
        BlackHole3D.Graphics.setSysUIPanelVisible(true);
        BlackHole3D.Graphics.setSysPanelUIDockArea(3);
        BlackHole3D.Camera.resetCamLocate();
        BlackHole3D.Camera.resetCamBound();
      } catch (error) {}
    },

    //监听窗口尺寸变化
    onResize() {
      let box = this.$refs["blackHoleContainer"];
      if (box) {
        window.BlackHole3D.m_re_em_window_width = window.innerWidth;
        window.BlackHole3D.m_re_em_window_height = window.innerHeight;
      }
    },

    //卸载
    releaseEngine() {
      document.removeEventListener("REDataSetLoadFinish", () => {});
      document.removeEventListener("RESystemReady", () => {});
      if (typeof window.BlackHole3D?.releaseEngine != "undefined") {
        canvasHolder.moveCanvasToBody();
        window.BlackHole3D?.releaseEngine();
        window.BlackHole3D = null;
      }
    },
  },
  beforeDestroy() {
    this.releaseEngine();
  },
};
</script>

<style lang="less" scoped>
.versionView-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header {
    padding: 0 20px;
    line-height: 60px;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    background-color: #2f2f2f;
    flex-shrink: 0;
  }
  .BlackHole-container {
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .spin-warp {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 22;
      display: flex;
      flex-direction: column;
      align-items: center;
      .tip {
        --w: 28ch;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #fff;
        line-height: 50px;
        letter-spacing: var(--w);
        width: var(--w);
        overflow: hidden;
        white-space: nowrap;

        text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
          calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0 #fff,
          calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
          calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
          calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
          calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
          calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
          calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;

        animation: l20 2s infinite linear;
        &::before {
          content: "模型正在转换中，请稍后重试...";
        }
      }

      @keyframes l20 {
        6.08% {
          text-shadow: calc(0 * var(--w)) -10px #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0 #fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        12.16% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) -10px #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0 #fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        18.24% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) -10px #fff, calc(-3 * var(--w)) 0 #fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        24.32% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) -10px #fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        30.40% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) -10px #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        36.48% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) -10px #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        42.56% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) -10px #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        48.64% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) -10px #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        54.72% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) -10px #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        60.80% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) -10px #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        66.88% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) -10px #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        72.96% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) -10px #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        79.04% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) -10px #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        85.12% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) -10px #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) 0 #fff;
        }
        91.20% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) -10px #fff, calc(-15 * var(--w)) 0 #fff;
        }
        97.28% {
          text-shadow: calc(0 * var(--w)) 0 #fff, calc(-1 * var(--w)) 0 #fff,
            calc(-2 * var(--w)) 0 #fff, calc(-3 * var(--w)) 0#fff,
            calc(-4 * var(--w)) 0 #fff, calc(-5 * var(--w)) 0 #fff,
            calc(-6 * var(--w)) 0 #fff, calc(-7 * var(--w)) 0 #fff,
            calc(-8 * var(--w)) 0 #fff, calc(-9 * var(--w)) 0 #fff,
            calc(-10 * var(--w)) 0 #fff, calc(-11 * var(--w)) 0 #fff,
            calc(-12 * var(--w)) 0 #fff, calc(-13 * var(--w)) 0 #fff,
            calc(-14 * var(--w)) 0 #fff, calc(-15 * var(--w)) -10px #fff;
        }
      }
    }
    .bim-container {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
